<template>
     <el-container class="home-container">
       <!--头部区域-->
       <el-header>
         <!--在头部区域左边放一个图片  ，右边存放是我们个人信息下拉-->
         <div >
           <!--左侧图片-->
           <span style="margin-left: 25px;">
             <img src="../assets/logo1.png" width="250px;" style="margin-left: -15px;" height="100%" alt>
           </span>
         </div>
         <el-dropdown>
           <div >
             <!--右侧个人图像-->
              <el-avatar :size="50" :src="this.userInfo.avatar" style="cursor: pointer;"></el-avatar>
           </div>
           <el-dropdown-menu slot="dropdown" trigger="click">
             <el-dropdown-item>
               <span type="danger" @click="toWelcome"><span class="el-icon-house"></span> 系统首页</span>
             </el-dropdown-item>
             <el-dropdown-item>
               <span type="danger" @click="getContact"><span class="el-icon-house"></span> 交流讨论</span>
             </el-dropdown-item>
             <el-dropdown-item>
               <span type="danger" @click="logout"><span class="el-icon-house"></span> 退出登录</span>
             </el-dropdown-item>
           </el-dropdown-menu>
         </el-dropdown>
       </el-header>

       <!--主体部分 左侧是左侧栏   右侧是内容区域，内容是否可以变化的-->
       <el-container style="height: 500px;">
          <!--左侧菜单-->
         <el-aside :width="isOpen ===true ? '64px':'200px'">
           <div class="toggle-btn" @click="toggleMenu"><|||></div>
             <!--下面显示菜单信息-->
             <el-menu class="el-menu-vertical-demo"
                      :collapse="isOpen"
                      :router="true"
                      :default-active="activePath"
                      background-color="#001529"
                      :collapse-transition="false"
                      text-color="rgba(255,255,255,0.7)"
                      unique-opened>
                  <MenuTree :menuList="this.menuList"></MenuTree>
               </el-menu>
         </el-aside>

         <!--右侧是我们内容主体部分-->
         <el-main v-loading="loading" style="background: #ffffff">
           <router-view></router-view>
         </el-main>
       </el-container>
     </el-container>
</template>

<script>
// @ is an alias to /src
import MenuTree from "../components/MenuTree";
export default {
  name: 'Home',
  components: {
    MenuTree
  },
  data() {
    return {
      userInfo: {},
      isOpen: false,
      menuList: [],
      loading: true,
      activePath:""
    }
  },
  methods: {
    toggleMenu(){
      this.isOpen = !this.isOpen;
    },
    toWelcome(){

    },
    getContact() {

    },
    logout() {

    },
    async getUserInfo() {
      const {data: res}= await this.$http.get('system/user/info')
      if(res.success){
        this.userInfo = res.data;
        //将用户信息保存在vuex
        this.$store.commit("setUserInfo",res.data) ;
      }else{
        return this.$message.error("获取用户信息失败"+res.msg);
      }
    },
    async getMenuList(){
      const{data: res} = await this.$http.get('system/user/findMenu');
      if(!res.success){
        return this.$message.error("获取菜单信息失败"+res.msg);
      }
      this.menuList = res.data;
    }
  },
  mounted(){
    this.getUserInfo();
  },
  created(){
    this.getMenuList();
    this.activePath = window.sessionStorage.getItem("activePath");
    setTimeout(()=>{
      this.loading = false;
    },500)
  }
}
</script>
<style>
  .el-menu {
    border-right: solid 1px #001529;
  }
  .el-header {
    background-color: #001530;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #ffffff;
    font-size: 20px;
  }
  .el-aside {
    background-color: #001530;
  }
  .home-container {
    width: 100%;
    height: 100%!important;
  }
  .toggle-btn{
    background-color: #2d8cf0!important;
    font-size: 10px;
    line-height: 24px;
    color: #ffffff;
    text-align: center;
    letter-spacing: 0.2em;
    cursor: pointer;
  }
</style>
